<template>
  <div v-if="model">
    <nav-bar />
    <div class="detailinfo">
      <div class="video">
        <video controls="controls" :src="model.content"></video>
      </div>
      <div class="detailname">
        <div>
          <span>{{ model.category.title }}</span>
          <span>{{ model.name }}</span>
        </div>
        <div>
          <span>{{ model.userinfo.name }}</span>
          <span>152.4万次观看</span>
          <span>2.4万弹幕</span>
          <span>{{ model.date }}</span>
        </div>
        <div>
          <p
            @click="collectionClick"
            :class="{ activeColor: collectionActive }"
          >
            <!-- <span class="icon icon-star-full"></span> -->
            <van-icon name="star" />
            <span class="">收藏</span>
          </p>
          <p
            @click="subscriptClick"
            :class="{ activeColor: subscritionActive }"
          >
            <!-- <span class="icon icon-box-add"></span> -->
            <van-icon name="like" />
            <span class="">关注</span>
          </p>
          <p>
            <!-- <span class="icon icon-redo2"></span> -->
            <van-icon name="share" />
            <span class="">分享</span>
          </p>
        </div>
      </div>
      <div class="detailparent">
        <cover
          class="detailitem"
          v-for="(item, index) in commendList"
          :key="index"
          :detailitem="item"
        ></cover>
      </div>
      <comment-title
        :datalength="lens"
        ref="commentipt"
        @postcomment="postsuccess"
      />
      <comment
        @lengthselect="(len) => (lens = len)"
        ref="commentPublish"
        @publishClick="publishClick"
      />
    </div>
  </div>
</template>

<script>
  import NavBar from '@/components/common/Navbar.vue'
  import cover from './cover'
  import commentTitle from '@/components/article/commentTitle.vue'
  import comment from '@/components/article/comment.vue'

  export default {
    data() {
      return {
        model: null,
        commendList: null,
        lens: null,
        postcom: {
          comment_content: '',
          comment_date: '',
          parent_id: null,
          article_id: null,
        },
        collectionActive: null,
        subscritionActive: null,
      }
    },
    components: {
      NavBar,
      cover,
      commentTitle,
      comment,
    },
    methods: {
      async articleitemData() {
        const res = await this.$http.get('/article/' + this.$route.params.id)
        this.model = res.data[0]
        if (this.model) {
          this.subscriptInit()
        }
      },
      async commendData() {
        const res = await this.$http.get('/commend')
        this.commendList = res.data
      },
      async postsuccess(res) {
        const date = new Date()
        let m = date.getMonth() + 1
        let d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        this.postcom.comment_content = res
        this.postcom.comment_date = m + '-' + d
        this.postcom.article_id = this.$route.params.id
        const result = await this.$http.post(
          '/comment_post/' + localStorage.getItem('id'),
          this.postcom
        )
        this.$refs.commentPublish.commentData()
        this.postcom.parent_id = ''
        if (result.status == '200') {
          this.$msg.success('评论发表成功')
        }
      },
      publishClick(id) {
        this.postcom.parent_id = id
        this.$refs.commentipt.focusIpt()
      },
      //收藏、取消收藏
      async collectionClick() {
        if (localStorage.getItem('token')) {
          const res = await this.$http.post(
            '/collection/' + localStorage.getItem('id'),
            { article_id: this.$route.params.id }
          )
          if (res.data.msg == '收藏成功') {
            this.collectionActive = true
          } else {
            this.collectionActive = false
          }
          this.$msg.success(res.data.msg)
        }
      },
      //是否收藏 是否关注
      async collectionInit() {
        if (localStorage.getItem('token')) {
          const res = await this.$http.get(
            '/collection/' + localStorage.getItem('id'),
            {
              params: {
                article_id: this.$route.params.id,
              },
            }
          )
          this.collectionActive = res.data.success
        }
      },
      async subscriptInit() {
        if (localStorage.getItem('token')) {
          const result = await this.$http.get(
            '/sub_scription/' + localStorage.getItem('id'),
            {
              params: {
                sub_id: this.model.userid,
              },
            }
          )
          this.subscritionActive = result.data.success
        }
      },
      //关注、取消关注
      async subscriptClick() {
        if (localStorage.getItem('token')) {
          const res = await this.$http.post(
            '/sub_scription/' + localStorage.getItem('id'),
            { sub_id: this.model.userid }
          )
          if (res.data.msg == '关注成功') {
            this.subscritionActive = true
          } else {
            this.subscritionActive = false
          }
          this.$msg.success(res.data.msg)
        }
      },
    },
    created() {
      this.articleitemData()
      this.commendData()
      this.collectionInit()
    },
    watch: {
      $route() {
        this.articleitemData()
        this.commendData()
        this.collectionInit()
      },
    },
  }
</script>

<style lang="stylus" scoped>
  .detailinfo
    background-color: white

    .video
      width: 100%

      video
        width: 100%

  .detailname
    padding: 15px

    div:nth-child(1)
      span:nth-child(1)
        padding: 0 2.778vw
        color: #fb7299
        background-color: #f4f4f4
        border-radius: 2.778vw

    div:nth-child(2)
      padding: 3.889vw 2.778vw

      span
        color: #aaa
        font-size: 3.333vw
        padding-right: 2.778vw

      span:nth-child(1)
        color: #000000
        font-size: 4.444vw
        padding-right: 2.778vw

    div:nth-child(3)
      padding: 0 2.778vw
      display: flex

      p
        margin-right: 4.167vw
        display: flex
        align-items: center
        color: #757575

        span:nth-child(1)
          padding-right: 0.833vw
          font-size: 5.833vw

        span:nth-child(2)
          font-size: 3.611vw

      .activeColor
        color: #fb7299

  .detailparent
    display: flex
    flex-wrap: wrap
    justify-content: space-around

    .detailitem
      margin: 5px 0
      width: 45%
</style>